<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FNISVGEditor test</title>
  <link rel="stylesheet" href="simple.css" />
  <script type="text/javascript" src="../scripts/prototype/prototype.js"> </script>
  <script type="text/javascript" src="../scripts/fnievents/fnievents-uncompressed.js"> </script>
  <script type="text/javascript" src="../scripts/fnilocale/fnilocale-uncompressed.js"> </script>
  <script type="text/javascript" src="../scripts/guicomponent/guicomponent.js"> </script>
  <script type="text/javascript" src="../scripts/fnisvgdom/fnisvgdom-uncompressed.js"> </script>
  <script type="text/javascript" src="../../../dist/fnisvgeditor-uncompressed.js"> </script>
  <script type="text/javascript">
            var r = 0;
           
            function addDebugText(text){
              r++;
              var p = document.createElement('p');
              p.innerHTML = r + ":" + text;
              var dbg = $('debug');
              var fc = dbg.firstChild;
              if (Object.isNull(fc)) 
                dbg.appendChild(p);
              else dbg.insertBefore(p, fc);
            };

            function init(){ 
              var locale = 'en';
              if (window.location.search.length > 1) {
                var params = window.location.search.substring(1).split('&');
                for (var i = 0, l = params.length; i < l; i++) {
                  var s = params[i].split('=');
                  if (s[0] == 'locale') {
                    locale = s[1];
                    break;
                  }
                }
              }
              
              var localeSelect = $('localeSelect');  
              Event.observe(localeSelect, "change", function (event) {
                var element = Event.element(event);
                window.location.href = window.location.protocol + "//" + window.location.host + window.location.pathname + "?locale=" + element.value;
              });
              localeSelect.value = locale;         
  
              if (!Prototype.BrowserFeatures.supportsSVG()) {
                alert("Your browser doesn't support SVG");
              } else { 
                var container = $('container');
  
                var svgEditor = new FNISVGEditor({
                  name: 'testEditor',
                  basePath: '../../../dist', 
                  configuration: {
                    languages: ['fi', 'en'],
                    plugins: {
                      active: [
                        'viewTools','drawrect','drawellipse','drawpath','style', 'grid', 'objectedit', 'pathedit','newdocument',
                        'loaddocument', 'statusinfo','objectgroups', 'clipboard', 'undo', 'layers', 'tests', 'documentproperties',
                        'align'
                      ]
                    },
                    toolbar: [
                      ['n', 'newDocument', 'loadDocument', 'documentProperties'],
                      ['g', 'drawEllipse', 'drawPath', 'drawRect', 'editObject', 'editPath', 'zoom'],
                      ['n', 'align'],
                      ['n', 'clipboardCut', 'clipboardCopy', 'clipboardPaste', 'clipboardDelete'], 
                      ['n', 'zoomFitPage'],                       
                      ['n', 'groupObjects', 'ungroupObjects'],
                      ['n', 'changeForegroundColor', 'changeStrokeColor', 'changeStrokeStyle'],
                      ['n', 'undo', 'redo'],
                      ['n', 'grid'],
                      ['n', 'runUnitTests']
                    ],
                    loadMode: 'script'
                  },
                  language: locale
                });

                svgEditor.addListener("editorInitialized", function (event) {
                  var editor = event.component;
                  editor.setHeight(container.getHeight());
                  editor.getViewPort().zoomToPage();

                  Event.observe(window, "resize", function (event) {
                    editor.setHeight(container.getHeight());
                    editor.getViewPort().zoomToPage();
                  });
                });

                container.appendChild(svgEditor.domNode);
                svgEditor.componentOnDOM();
              } 
            }
        </script>
</head>
<body onload="init();">
<div id="localeContainer">
<div id="localeTitle">Locale:</div>
<select id="localeSelect">
  <option value="en">English</option>
  <option value="fi">Suomi</option>
</select></div>

<div id="container"></div>
<div id="debug"></div>
</body>
</html>
